<template>
	<div>
		<!-- 头部及导航顶部 -->
		<div class="agileits-banner">
			<div class="bnr-agileinfo">
				<div class="banner-top w3layouts">
					<div class="container">
						<ul class="agile_top_section">
							<li>
								<p> 爱心宠物网站 !</p>
							</li>
							<li>
								<p><span class="glyphicon glyphicon-earphone"></span> +98 123 4567 8999 </p>
							</li>
							<li >
								<a class="sign" href="#" @click="dialogFormVisible1 = true" v-if="!$store.state.username">
									<i class="fa fa-sign-in" aria-hidden="true"></i>
									登录
								</a>
								<a class="sign" href="#" @click="signout" v-if="$store.state.username">
									<i class="fa fa-sign-in" aria-hidden="true"></i>
									{{$store.state.username}}注销
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="banner-w3text w3layouts">
					<p class="w3_text"></p>
					<h3 class="w3ls_agile">宠物爱心小站 </h3>

					<h2>Pets Care</h2>
				</div>
				<!-- 导航 -->
				<div class="top-nav w3-agiletop">
					<div class="agile_inner_nav_w3ls">
						<div class="navbar-header w3llogo">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<h1 style="margin: 0;"><a href="index.html">Pets Care</a></h1>
						</div>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<div class="w3menu navbar-left">
								<ul class="nav navbar">
									<li>
										<router-link to="/" class="active">主页</router-link>
									</li>
									<li>
										<router-link to="/about">关于我们</router-link>
									</li>
									
									<li v-if="$store.state.username">
										<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
											<span data-letters="Pages">个人设置</span>
											<span class="caret"></span>
										</a>
										<ul class="dropdown-menu">
											<li><router-link to="/management/profile">个人资料</router-link></li>									
											<li><router-link to="/management/reset">重置密码</router-link></li>
											<li><router-link to="/management/pets?page=1">发布的信息</router-link></li>
											<li><router-link to="/management/comments">我的评论</router-link></li>	
																						
										</ul>
									</li>
									<li v-if="$store.state.username">
										<router-link to="/adoptform">宠物管理</router-link>
									</li>
									<!-- <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span data-letters="Pages">Pages</span><span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a href="icons.html">Icons</a></li>
										<li><a href="typo.html">Typography</a></li>
									</ul>
								</li> -->
									
								</ul>
							</div>
							<!-- <div class="w3ls-bnr-icons social-icon navbar-right">
								<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
								<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a>
								<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a>
								<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a>
							</div> -->
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>

			</div>
		</div>


		<!-- 主页中间栏 -->
		<router-view></router-view>


		<!-- 版权及订阅底部 -->
		<div class="subscribe wthree-sub">
			<div class="container">
				<h4>现在订阅</h4>
				<form action="#" method="post">
					<input type="email" name="email" placeholder="请输入您的邮箱..." required="">
					<input type="submit" value="订  阅" style="">
					<div class="clearfix"> </div>
				</form>
				<div class="w3lsfoter-icons social-icon">
					<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
					<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a>
					<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a>
					<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a>
				</div>
			</div>
		</div>
		<div class="copy-w3right">
			<div class="container">
				<!-- <div class="top-nav bottom-w3lnav">
					<ul>
						<li>
							<router-link to="/">Home</router-link>
						</li>
						<li>
							<router-link to="/about">About</router-link>
						</li>
						<li>
							<router-link to="/adoptform">Form</router-link>
						</li>
						<li>
							<router-link to="/profile">Profile</router-link>
						</li>
					</ul>
				</div> -->
				<p>© 2019 Pets Care. 所有版权及设计by <a href="#" target="_blank">Flora&Zhou</a> </p>
			</div>
		</div>

		<el-dialog :visible.sync="dialogFormVisible1">
			<div class="signin-form profile">
				<h3 class="agileinfo_sign">用户登录</h3>
				<div class="login-form">
					<el-form :model="form">
						<el-form-item>
							<input type="text" v-model="form.username" placeholder="用户名" required="">
						</el-form-item>
						<el-form-item>
							<input type="password" class="password" v-model="form.password" placeholder="密码"
								required="" />
						</el-form-item>
						<input type="submit" value="登录" @click="signin">
					</el-form>
				</div>
				<p>
					<a @click="dialogFormVisible2 = true">注册账户</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a @click="forget">忘记密码</a>&nbsp;&nbsp;&nbsp;&nbsp;
				</p>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="dialogFormVisible2">
			<div class="signin-form profile">
				<h3 class="agileinfo_sign">用户注册</h3>
				<div class="login-form">
					<el-form :model="form">
						<el-form-item prop="username">
							<input type="text" v-model="form.username" placeholder="用户名" required="">
						</el-form-item>
						<el-form-item prop="email">
							<input type="email" v-model="form.email" placeholder="邮箱" required="">
						</el-form-item>
						<el-form-item prop="password1">
							<input type="password" class="password" v-model="form.password1" placeholder="密码"
								required="" />
						</el-form-item>
						<el-form-item prop="password2">
							<input type="password" class="password" v-model="form.password2" placeholder="重复密码"
								required="" />
						</el-form-item>
						<input type="submit" value="注册" @click="signup">
					</el-form>
				</div>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="dialogFormVisible3">
			<div class="signin-form profile">
				<h3 class="agileinfo_sign">找回密码</h3>
				<div class="login-form">
					<el-form :model="form">
						<el-form-item prop="email">
							<input type="email" v-model="form.email" placeholder="邮箱" required="">
						</el-form-item>
						<el-form-item prop="code">
							<input type="text" v-model="form.code" placeholder="验证码">
						</el-form-item>
						<el-form-item prop="password1">
							<input type="password" class="password" v-model="form.password1" placeholder="新密码" />
						</el-form-item>
						<el-form-item prop="password2">
							<input type="password" class="password" v-model="form.password2" placeholder="重复密码" />
						</el-form-item>
						<input type="submit" value="获取验证码" @click="acquire">
						<input type="submit" value="重置密码" @click="update">
					</el-form>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//username:JSON.parse(localStorage.getItem('username')),//localStorage.getItem('username'),
	
				dialogFormVisible1:false,
				dialogFormVisible2:false,
				dialogFormVisible3:false,
				formLabelWidth:'120px',
				form :{
					username:'',
					password:'',
					password1:'',
					password2:'',
					email:'',
					code:'',
				},
			};
		},
		computed:{
		},
		methods: {
			signout(){// 注销	
				if(this.username != ''){
					localStorage.clear()
					this.$router.go(0);
				}	
			},
			signin(){ // 登录
				let formdata = new FormData()
				formdata.append('username', this.form.username)
				formdata.append('password', this.form.password)
				const path = 'http://10.138.120.46:5000/api/signin'
					var config = {
						headers: {
							'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
						}
					};
					var that = this
					this.axios.post(path, formdata, config).then((response) => {
						if(response.data.info === 401){
							that.$message({
								type:'error',
								message:'用户名或密码输入错误，请重新输入！'
							})
							
						}else if(response.data.info === 500){
							this.form.username=''
							this.form.password=''
						}else{
							that.$message({
								type:'success',
								message:'登录成功！'
							})
							localStorage.setItem('username', JSON.stringify(response.data.username))
							localStorage.setItem('UID', JSON.stringify(response.data.UID))
							localStorage.setItem('email', JSON.stringify(response.data.email))						
							that.dialogFormVisible1 = false
							that.$router.go(0);
						}
					}).catch((error) => {
						alert(error)
					})
			},
			signup(){ // 注册
				if(this.form.username != '' && this.form.email != '' && this.form.password1!='' && this.form.password2!= ''){
					if(this.form.password1 != this.form.password2){
					this.$message({
						type: 'warning',
						message: '密码不一致，请重新输入！'
					})
					this.form.password1 = ''
					this.form.password2 = ''
				}else{
					var formdata = new FormData()
					formdata.append('username', this.form.username)
					formdata.append('email', this.form.email)
					formdata.append('password', this.form.password1)
					const path = 'http://10.138.120.46:5000/api/signup'
					var config = {
						headers: {
							'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
						}
					};
					var that = this
					this.axios.post(path, formdata, config).then((response) => {
						if(response.data.info === 401){
							that.$message({
								type:'error',
								message:'用户名已存在，请重新输入！'
							})
						}else if(response.data.info === 500){
							this.form.username=''
							this.form.password1=''
							this.form.password2=''
							this.form.email=''
						}else{
							that.$message({
								type:'success',
								message:'注册成功，请登录'
							})
							that.dialogFormVisible2 = false
						}
					}).catch((error) => {
						alert(error)
					})
				}
				this.form.username=''
				this.form.password1=''
				this.form.password2=''
				this.form.email=''
				}
			},
			forget(){ // 忘记密码
				this.dialogFormVisible3 = true
			},
			update(){ // 重置密码提交事件
				if(this.form.code != '' && this.form.email != '' && this.form.password1 != '' && this.form.password2 != ''){
					if(this.form.password1 != this.form.password2){
					this.$message({
						type: 'warning',
						message: '密码不一致，请重新输入！'
					})
					this.form.password1 = ''
					this.form.password2 = ''
				}else{
					let formdata = new FormData()
					formdata.append("code", this.form.code)
					formdata.append("email", this.form.email)
					formdata.append("password", this.form.password1)
					const path = 'http://10.138.120.46:5000/api/reset'
					var config = {
						headers: {
							'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
						}
					};
					var that = this
					this.axios.post(path, formdata, config).then((response) => {
						if(response.data.info == 401){
							that.$message({
									type: 'warning',
									message: '验证码错误！请重新输入'
							});
						}
						else{
							that.$message({
									type: 'success',
									message: '密码重置成功！'
							});	
							that.dialogFormVisible3 = false
						}
					}).catch((error) => {
						alert(error)
					})
					this.form.email = ''
					this.form.code = ''
					this.form.password1 = ''
					this.form.password2 = ''
					}
				}	
			},
			acquire(){ // 获取验证码
				if(this.form.email != ''){
					let formdata = new FormData()
					formdata.append("email",this.form.email)
					const path = 'http://10.138.120.46:5000/api/send_email'
					var config = {
						headers: {
							'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
						}
					};
					var that = this
					this.axios.post(path, formdata, config).then((response) => {
						if(response.status == 200){
							that.$message({
									type: 'success',
									message: '邮件发送成功'
							});
						}
					}).catch((error) => {
						alert(error)
					})
				}
			}
		},
	};
	</script>

<style scoped lang="scss">
	@import './assets/css/bootstrap.css';
	@import './assets/css/chocolat.css';
	/* @import './assets/css/easy-responsive-table.css'; */
	@import './assets/css/font-awesome.css';
	@import './assets/css/style.css';
	@import './assets/css/bootstrap.css';



	.el-form-item {
		margin-bottom: 0px;
	}

	.el-form-item__content {
		line-height: 5px;
		position: relative;
		font-size: 14px;
	}

	.input {
		height: 40px;
	}

	.agileits-banner {
		background: url(./assets/images/bg1.jpg)no-repeat center 0px;
		background-size: cover;
	}
</style>